<template>
  <div class="model-precision">
    <div class="top">
      <div class="chart">
        <exam-section-chart :x-labels="[
          '断面1', '断面2', '断面3', '断面4', '断面5', '断面6', '断面7']" :join-num="[20, 15, 25, 10, 15, 30, 40]"
          :dispatch-num="[150, 160, 120, 120, 180, 40, 20]" :sure-values="[24, 22, 24, 26, 30, 28, 32]" />
      </div>
    </div>
    <div class="bottom">
      <div class="box left-box">
        <div class="title">模型计算精度统计说明</div>
        <div class="content">
          <div class="line">
            <span class="text">考核要求：</span>
            <span class="num blue">98%</span>
            <span class="text ml20">考核结果：</span>
            <span class="num green">合格</span>
          </div>
          <div class="line">
            <span class="text">累计调用次数:</span>
            <span class="num">1300</span>
            <span class="text">次</span>
            <span class="text ml20">参与降雨次数:</span>
            <span class="num blue">130</span>
            <span class="text">场</span>
            <span class="text ml20">参与断面数</span>
            <span class="num blue">63</span>
            <span class="text">个</span>
          </div>
          <div class="line">
            <span class="text">平均确定性系数</span>
            <span class="num green">0.92</span>
          </div>
        </div>
      </div>
      <div class="box right-box">
        <div class="title">模型精度计算详情</div>
        <div class="content">
          <div class="table">
            <el-table :data="[]" border height="100%">
              <el-table-column prop="date" label="所属流域" />
              <el-table-column prop="num" label="预报断面" />
              <el-table-column prop="suorer" label="调用次数" />
              <el-table-column prop="suorer" label="计算场次" />
              <el-table-column prop="suorer" label="平均确定性系数" />
            </el-table>
          </div>
          <div class="page">
            <el-pagination v-model:current-page="currentPage" :page-size="10" background
              layout="total, prev, pager, next" :total="100" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import examSectionChartVue from '@/components/app-echart/exam-section-chart.vue'

const currentPage = ref(1)
</script>

<style lang="less" scoped>
.model-precision {
  display: flex;
  flex-direction: column;
  height: 100%;

  .top {
    display: flex;
    flex-direction: row;
    height: 300px;

    .chart {
      flex: 1;
    }
  }

  .bottom {
    flex: 1;
    display: flex;
    flex-direction: row;

    .box {
      flex: 1;

      .title {
        line-height: 30px;
        text-align: center;
        font-size: 16px;
      }

      .content {
        height: calc(100% - 30px);
        box-sizing: border-box;
      }
    }

    .left-box {
      .content {
        display: flex;
        flex-direction: column;
        padding: 20px 50px 20px 20px;
      }

      .line {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .num {
          font-weight: 700;
          font-size: 20px;
          margin: 0 5px;
        }

        .blue {
          color: #0054db;
        }

        .green {
          color: #70b603;
        }
      }
    }

    .right-box {
      .table {
        height: calc(100% - 50px);
      }

      .page {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
      }
    }
  }
}
</style>


